<template>
  <div>
    <p
      @click="downloadImportTemplate()"
      class="down-templete-text">下载导入模板</p>
    <div>
      <el-upload
        class="upload-demo"
        action="string"
        :show-file-list="false"
        :auto-upload="true"
        :disabled="loading"
        :before-upload="beforeUpload"
        :http-request="handleUpload"
      >
        <el-button
          size="small"
          type="primary"
          :loading="loading">点击导入</el-button>
        <div
          slot="tip"
          class="el-upload__tip">只能上传xlsx,xls文件</div>
      </el-upload>
    </div>
    <div v-if="loading">
      <i class="el-icon-loading" />
      数据读取中......请您耐心等待，系统即将给您返回读取结果
    </div>
    <div
      class="dev-style"
      v-else
      v-for="(item,index) in errorList"
      :key="index">
      <el-row>
        <el-col :span="8">
          <p>{{ item.name }}</p>
        </el-col>
        <el-col :span="2">
          <el-button
            size="small"
            type="primary"
            @click="downloadImportTemplate(item.url,item.name)">下载</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { fileDownload } from '@const/utils'
import { $loadFileSimply } from '@const/loadFileOps' // 下载文件的方法
import { updateTemplete } from '@const/productCenterApiV2'
const DOWN_TEMPLETE_URL = '/guoke-deepexi-file-library/api/v1/temp/FcFileTempMgr/downloadTempByCode?tempCode=PRODUCT_MDM_EXPORT_TEMP'
const PRODUCT_CENTER_V2 = '/guoke-deepexi-product-center/api/v2'
export default {
  data () {
    return {
      loading: false,
      errorList: [],
      importList: []
    }
  },
  methods: {
    // 下载导出模板
    downloadImportTemplate (currentUrl, filename) {
      if (currentUrl) {
        let param = {
          method: 'get',
          url: PRODUCT_CENTER_V2 + currentUrl, // 导出接口待定
          timeout: 300000
        }
        $loadFileSimply(param).then(res => {
          // 文件流
          fileDownload(res, filename)
        })
      } else {
        window.open(DOWN_TEMPLETE_URL)
      }
    },
    // 上传前拦截
    beforeUpload (data) {
      const isExcel = /\.xlsx?$/.test(data.name)
      if (!isExcel) {
        this.$message.warning('请上传excel')
        return false
      } else {
        console.log(data.name)
        this.loading = true
        return true
      }
    },
    // 发送请求
    handleUpload (data) {
      console.log(data)
      let fd = new FormData()
      fd.append('filename', data.file) // 需要上传的file
      const res = this.$axios({
        method: 'post',
        url: updateTemplete,
        headers: { 'Content-Type': 'multipart/form-data' },
        data: fd
      }).then(res => {
        // 验证返回信息
        res && res.data && this.verificationBack(res.data)
      }).catch(() => {
        this.loading = false
      })
    },
    // 验证返回信息
    verificationBack ({ code, payload, msg }) {
      this.loading = false
      if (payload != null) {
        this.errorList = payload
      } else {
        this.$message.success('上传失败，请重试')
      }
    }
  }
}
</script>

<style>
.down-templete-text {
  width: 100px;
  color: #2371c5;
  font-size: 12px;
  padding-bottom: 10px;
}
.dev-style {
  padding-top: 10px;
}
</style>
